 <!-- 
 @Author: Havery   
 @Date: 2021-01-11 13:58:16   
 @function:修改密码
----------------------------------------------------------  
 @Last Modified by:   LC-2021-01-11 13:58:16  
 @Modified function:xxx 
 -->
<template>
  <div>
    <!-- ref相当于Id:model是表单内容-->
    <el-form
      label-width="120px"
      ref="modifyInfo"
      :rules="formInfoRules"
      :model="formInfo"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="原密码：" prop="oldpassword">
            <el-input
              size="mini"
              v-model="formInfo.oldpassword"
              placeholder="请输入原密码"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="新密码：" prop="newpassword">
            <el-input
              size="mini"
              v-model="formInfo.newpassword"
              placeholder="请输入新密码"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="重复新密码：" prop="password">
            <el-input
              size="mini"
              v-model="formInfo.password"
              placeholder="请重复输入新密码"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer " class="el-dialog__footer">
      <el-button size="mini" @click="closeDialog()">取消</el-button>
      <el-button size="mini" type="primary" @click="submitForm('modifyInfo')"
        >保存</el-button
      >
    </div>
  </div>
</template>
<script>
import md5 from "js-md5";

import homeHttp from "@/api/home/index";
const { changePassword } = homeHttp;
export default {
  //组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，需要通过子组件的 props 选项
  //在模板中，要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件
  components: {},
  data() {
    return {
      formInfo: {},
      formInfoRules: {
        oldpassword: [
          {
            required: true,
            message: "原密码不能为空",
            trigger: "blur",
          },
        ],
        newpassword: [
          {
            required: true,
            message: "新密码不能为空",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "重复密码不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  /**html加载完成之前，执行。执行顺序：父组件-子组件 */
  created() {},
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {},
  methods: {
    //保存信息
    submitForm() {
      if (this.formInfo.newpassword != this.formInfo.password) {
        this.$messageTip.warning("两次新密码输入不一致"); 
        return;
      }
      let from = {
        password: md5(this.formInfo.password),
        newpassword: md5(this.formInfo.newpassword),
        oldpassword: md5(this.formInfo.oldpassword),
      };
      changePassword(from).then((response) => {
        let data = response.data;
        if (data.Code === 1000) {
          this.$messageTip.success(data.Msg); 
          this.$emit("callBack", null);
        } else {
          this.$messageTip.warning(data.Msg); 
        }
      });
    },
    //关闭增加弹出框
    closeDialog() {
      this.$emit("callBack", null);
    },
  },
};
</script>